<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			path: '/',
			redirect: '/menu',
			路由重定向，即匹配不到路由是就匹配/menu路由
		</pre>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Login = {
				template: `<div>登录组件<br /><button @click="loginHandle">点击登陆</button></div>`,
				methods: {
					loginHandle(){
						sessionStorage.setItem('userLogin', true)
						//登录完毕跳转内容组件
						this.$router.push({
							name: 'content'
						})
					}
				}
			}
			let Logout = {
				template: `<div>退出组件<br /><button @click="logOutHandle">点击退出</button></div>`,
				methods: {
					logOutHandle(){
						sessionStorage.removeItem('userLogin')
						/*this.$router.push({
							name: 'login'
						})*/
					}
				}
			}
			let Menu = {
				template: `<p>menu组件<br /></p>`,
				
			}
			let Content = {
				template: '<p>content组件</p>',
				
			}
			let router = new VueRouter({
				routes: [{//路由重定向，即匹配不到路由是就匹配/menu路由
					path: '/',
					redirect: '/menu',
				},{
					path: '/login',
					name: 'login',
					component: Login,
				},{
					path: '/logout',
					name: 'logout',
					meta: {
						auth: true,
					},
					component: Logout
				},{
					path: '/menu',
					name: 'menu',
					meta: {
						auth: true,
					},
					component: Menu,
				},{
					path: '/content',
					name: 'content',
					//给未来路由做权限控制
					meta: {
						//auth字段模拟鉴权
						auth: true,//true表示用户访问需要登录
					},
					component: Content
				}]
			})
			//全局守卫
			router.beforeEach((to, from, next) => {
				console.log(to)
				console.log(from)
				if(to.meta.auth){
					if(sessionStorage.getItem('userLogin')){//登录完成
						next()
					}else{
						//跳转登录页面
						next({
							path: '/login'
						})
					}
				}else{
					next()
				}
			})
			
			let App = {
				template:`
				<div>
					<router-link to="/login">登录</router-link>
					<router-link to="/logout">退出</router-link>
					<router-link to="/menu">菜单</router-link>
					<router-link to="/content">内容</router-link>
					<keep-alive>
						<router-view></router-view>
					</keep-alive>
				</div>
				`,
				methods: {
				}
			}
			let vm = new Vue({
				el: '#app',
				components: {App},
				router,
				data(){
					return {
						
					}
				},
			})
		</script>
	</body>
</html>
